<!--{template lyear:header_simple_start}-->
<link rel="stylesheet" href="static/lyear/js/layui/css/layui.css?{VERHASH}">
<!--{template lyear:header_simple_end}-->
<main class="bs-main-container">
    <div class="container-fluid">
        <div class="card">
            <div class="card-body">
                <ul class="nav nav-pills">
                    <!--{loop $systemlog_setting $mark $info}-->
                    <!--{if $info[is_open]==1}-->
                    <li class="nav-item">
                        <a href="javascript:;" class="nav-link type-btn <!--{if $operation==$mark}-->active<!--{/if}-->" data-operation="$mark">{$info['title']}</a>
                    </li>
                    <!--{/if}-->
                    <!--{/loop}-->
                </ul>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <div class="card-search mb-2-5">
                    <div class="row">
                        <div class="col-sm-4">
                            <input type="text" class="form-control pull-left" name="keyword" id="keyword" placeholder="关键词" value="$_GET['keyword']">
                        </div>
                        <div class="col-md-4">
                            <button type="submit" class="btn btn-primary me-1" id="search-btn">搜索</button>
                            <button type="reset" class="btn btn-default" id="refreshsearch">重置</button>
                        </div>
                    </div>
                </div>
                <table class="layui-hide" id="table" lay-filter="table"></table>
                <script type="text/html" id="toolbar">
                    <div class="layui-btn-container">
                        <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
                        <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" lay-event="get">刷新</button>
                    </div>
                </script>
                <script type="text/html" id="barDemo">
                    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看详情</a>
                </script>
            </div>
        </div>
    </div>
</main>
<script src="static/lyear/js/layui/layui.js?{VERHASH}"></script>
<script>
    var operation = '{$_GET['operation']}';
    var keyword = $('#keyword').val();
    layui.use('table', function () {
        var table = layui.table;
        table.render({
            elem: '#table',
            url: '{MOD_URL}&do=getinfo',
            toolbar: '#toolbar',
            where: {operation: operation,keyword: keyword},
            title: '系统日志数据表格',
            even:true,
            cellMinWidth:120,
            text: {
                none: '暂无相关日志'
            },
            page: {
                limit: 20,
                limits: [10, 20, 50, 100, 200, 500, 1000, 2000, 5000]
            },
            cols: [[
                {type: 'checkbox', fixed: 'left'}
                , {title: 'ID', width: 80, fixed: 'left', type: 'numbers'}
                , {field: 'operator', title: '{lang operator}', align: 'center', sort: true}
                , {field: 'usergroup', title: '{lang usergroup}', align: 'center', sort: true}
                , {field: 'ip', title: 'IP', align: 'center', sort: true}
                , {field: 'time', title: '{lang time}', align: 'center', sort: true}
                , {field: 'loginfo', title: '{lang info}', align: 'center', sort: true},
                , {field: 'visit', title: '{lang visit}', align: 'right', hide: true, sort: true}
                , {field: 'from', title: '{lang from}', align: 'right', hide: true, sort: true}
                , {field: 'info', title: '{lang Equipment information}', align: 'right', hide: true, sort: true}
                , {title: '{lang operation}', fixed: 'right', width: 100, align: 'center', toolbar: '#barDemo', fixed: 'right'}
            ]]
        });
        //头工具栏事件
        table.on('toolbar(table)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id); //获取选中行状态
            var data = checkStatus.dataCache;
            switch (obj.event) {
                case 'getCheckData':
                    if (data.length === 0) {
                        showmessage("请至少选择一行", 'danger', 3000, 1);
                        return;
                    }
                    var template = '<div class="accordion">';
                    data.forEach(function (item) {
                        template += '<div class="accordion-item">';
                        template += '<h2 class="accordion-header" id="Open-heading' + item.LAY_NUM + '">';
                        template += '<button class="accordion-button" type="button" data-toggle="collapse" data-target="#Open-collapse' + item.LAY_NUM + '" aria-expanded="true" aria-controls="Open-collapse' + item.LAY_NUM + '">';
                        template += 'ID：' + item.LAY_NUM;
                        template += '</button>';
                        template += '</h2>';
                        template += '<div id="Open-collapse' + item.LAY_NUM + '" class="accordion-collapse collapse show" aria-labelledby="Open-heading' + item.LAY_NUM + '">';
                        template += '<div class="accordion-body">';
                        template += '<p><strong>{lang operator}:</strong> ' + item.operator + '</p>';
                        template += '<p><strong>{lang usergroup}:</strong> ' + item.usergroup + '</p>';
                        template += '<p><strong>IP:</strong> ' + item.ip + '</p>';
                        template += '<p><strong>{lang time}:</strong> ' + item.time + '</p>';
                        template += '<p><strong>{lang info}:</strong> ' + item.loginfo + '</p>';
                        template += '<p><strong>{lang visit}:</strong>' + item.visit + '</p>';
                        template += '<p><strong>{lang from}:</strong><a href="' + item.from + '" target="_blank">' + item.from + '</a></p>';
                        template += '<p><strong>{lang Equipment information}:</strong> ' + item.info + '</p>';
                        template += '</div>';
                        template += '</div>';
                        template += '</div>';
                    });
                    template += '</div>';
                    layer.alert(template, {
                        title: '选中的日志信息'
                    });
                    break;
                case 'get':
                    table.reloadData('table', {
                        where: {operation: operation}, // 清空搜索参数
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                    });
                    break;
            }
            ;
        });
        //监听工具条
        table.on('tool(table)', function (obj) {
            if (obj.event === 'detail') {
                showDataTemplate(obj);
            }
        });
        //触发排序事件
        table.on('sort(table)', function (obj) {
            layer.msg('排序结果为前端根据当前页数据进行排序', {offset:'10px'});
        });
        table.on('rowDouble(table)', function (obj) {
            showDataTemplate(obj);
        });

        function showDataTemplate(obj) {
            var data = obj.dataCache;
            var template = '<div>' +
                '<p><strong>{lang operator}:</strong> ' + data.operator + '</p>' +
                '<p><strong>{lang usergroup}:</strong> ' + data.usergroup + '</p>' +
                '<p><strong>IP:</strong> ' + data.ip + '</p>' +
                '<p><strong>{lang time}:</strong> ' + data.time + '</p>' +
                '<p><strong>{lang info}:</strong> ' + data.loginfo + '</p>' +
                '<p><strong>{lang visit}:</strong> ' + data.visit + '</p>' +
                '<p><strong>{lang from}:</strong> <a href="' + data.from + '" target="_blank">' + data.from + '</a></p>' +
                '<p><strong>{lang Equipment information}:</strong> ' + data.info + '</p>' +
                '</div>';

            layer.alert(template, {
                title: 'ID <strong>' + data.LAY_NUM + '</strong> 详情：'
            });

            // 标注选中样式
            obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
        }

        // 搜索按钮功能
        $(document).on('click', '#search-btn', function () {
            // 刷新表格并传递搜索参数
            keyword = $('#keyword').val();
            table.reloadData('table', {
                where: {operation: operation,keyword: keyword},
                page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        });
        // 重置按钮功能
        $('#refreshsearch').click(function () {
            // 清空表单内容
            $('#keyword').val('');
            // 刷新表格
            table.reloadData('table', {
                where: {operation: operation}, // 清空搜索参数
                page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        });
        // 类型按钮功能
        $(document).on('click', '.type-btn', function () {
            // 移除所有 .type-btn 的 active 类
            $('.type-btn').removeClass('active');
            // 为当前点击的按钮添加 active 类
            $(this).addClass('active');
            // 获取当前的 type 值
            operation = $(this).data('operation');
            $('#keyword').val('');
            // 刷新表格并传递 operation 参数
            table.reloadData('table', {
                where: {operation: operation},
                page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        });
    });
</script>
<!--{template lyear:footer_simple}-->